<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	<ul>
		<li>线段生成器</li>
		<li>var line = d3.svg.line()</li>
		<li>line(data)</li>
		<li>line.x([x])</li>
		<li>line.y([y])</li>
		<li>line.interpolate([interpolate]) 设置或获取线段的插值模式，共13种</li>
		<li>line.tension([tension]) 设置或获取张力系数，当插值模式为：cardinal、cardinal-open、cardinal-close时有效</li>
		<li>line.defined([defind]) 设置或获取一个访问器</li>
	</ul>
	<div class="line">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var svg = d3.select(".line").append("svg").attr("width",500).attr("height",500);
		var lines = [[80,80],[200,100],[200,200],[100,200]];
		var linePath = d3.svg.line().interpolate("linear-closed");
		svg.append('path').attr("d",linePath(lines)).attr("stroke","skyblue").attr("stroke-width","3px").attr("fill","none");
		//玩玩访问器
		var lines2 = [240,280,320,360,400,440,480];
		var linePath2 = d3.svg.line()
											.x(function(d) {
												return d;
											})
											.y(function(d,i) {
												return i % 2 == 0 ? 40 : 120;
											})
		svg.append('path').attr("d",linePath2(lines2)).attr("stroke","skyblue").attr("stroke-width","3px").attr("fill","none");	
	</script>
</body>
</html>